﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>Poker Game Test</title>
    <script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="Scripts/quark.base-1.0.0.min.js" type="text/javascript"></script>
    <script src="JS/Display/Chair.js" type="text/javascript"></script>
    <script src="JS/pokerCard.js" type="text/javascript"></script>
    <script src="JS/player.js" type="text/javascript"></script>
    <script src="JS/pokerCardManager.js" type="text/javascript"></script>
    <!--<script src="/Scripts/easyWebSocket.min.js" type="text/javascript"></script>-->
    <script src="/Scripts/json.js" type="text/javascript"></script>
    <script src="/JS/Common.js" type="text/javascript"></script>
    <script src="/Chaos.Game.Poker/Common/PokerCommon.js" type="text/javascript"></script>
    <style>
        #container
        {
            background-image:url("/Resources/bg.jpg");
            background-repeat:no-repeat;
        }
    </style>
    <script type="text/javascript">
        var container, stage, context, width, height, timer, events;
        var chair_img, card_img, player_img, table_img, playerBackground_img;

        $(document).ready(function () {
            main();
        });

        function main() {

            container = Q.getDOM("container");

            events = Q.supportTouch ? ["touchend"] : ["mousedown", "mousemove", "mouseout", "mouseover"];

            width = 1000;
            height = 600;
            fps = 60;

            var canvas = Quark.createDOM("canvas", { width: width, height: height });
            container.appendChild(canvas);
            context = new Q.CanvasContext({ canvas: canvas });

            load_resource();
        }

        function start() {
            stage = new Q.Stage({ width: width, height: height, context: context });
            new PokerCardManager({ stage: stage });
            
            var em = new Q.EventManager();
            em.registerStage(stage, events);
            
            timer = new Q.Timer(1000 / fps);
            timer.addListener(stage);
            timer.addListener(Q.Tween);
            timer.start();
        }

        function load_resource() {
            var loader = new Q.ImageLoader();
            loader.addEventListener("loaded", on_loader_loaded);
            loader.addEventListener("complete", on_loader_complete);
            loader.load([{ id: "pokercard", src: "Resources/pokercard.jpg", size: 192 },
                         { id: "chair", src: "Resources/chair.png", size: 123 },
                         { id: "player", src: "Resources/player.jpg", size: 18 },
                         { id: "table", src: "Resources/table.png", size: 100 },
                         { id: "playerBackground", src: "Resources/player_bg.png", size: 35}]);

            function on_loader_loaded(e) {
                $("#loader").html("loading ... (" + e.target.getLoadedSize() + "/" + e.target.getTotalSize() + ") - [" + e.image.src + "]");
            }

            function on_loader_complete(e) {
                $("#loader").html("loading completed.");
                chair_img = e.images.chair.image;
                card_img = e.images.pokercard.image;
                player_img = e.images.player.image;
                table_img = e.images.table.image;
                playerBackground_img = e.images.playerBackground.image;
                start();
            }
        }
    </script>
</head>
<body>
    <div id="container">
    </div>
    <div id="result">
    </div>
    <div id="loader">
    </div>
</body>
</html>
